<template>
  <div class="form">
    <el-form :inline="true" label-width="120px">
      <div class="item" v-for="(item,index) in form" :key="index">
        <el-button
          size="mini"
          icon="el-icon-plus"
          v-if="index==0"
          class="add"
          round
          type="primary"
          @click="add"
        ></el-button>
        <el-button
          size="mini"
          icon="el-icon-minus"
          v-if="index>0"
          class="add"
          round
          type="danger"
          @click="min(item,index)"
        ></el-button>
        <div>
          <el-form-item
            label="一级科目选择："
            prop="firstLevel"
           
          >
            <el-select
              size="mini"
              v-model="item.firstLevel"
              @change="change(item,index)"
              placeholder="请选择"
              :style="'width:'+width"
            >
              <el-option
                v-for="(item,inx) in mock[index].options"
                :key="inx"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="二级科目选择："
            prop="firstLevel"
            
          >
            <el-select
              size="mini"
              v-model="item.secondLevel"
              @change="change1(item,index)"
              placeholder="请选择"
              :style="'width:'+width"
            >
              <el-option
                v-for="(item,inx) in mock[index].options1"
                :key="inx"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item
            label="训练课时长："          
          >
            <el-time-picker
              size="mini"
              value-format="HH:mm:ss"
              @change="setTime(index)"
              is-range
              v-model="mock[index].time"
              range-separator="至"
              style="width:240px"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
            ></el-time-picker>
            <span>共计60分钟</span>
          </el-form-item>
        </div>
        <div>
          <el-form-item
            :label="item.trainingType==0?'公里数选择：':'时间选择：'"
            prop="kilometers"
            
          >
            <el-input
              size="mini"
              :style="'width:'+width"
              v-model="item.kilometers"
              placeholder="请输入"
            >
              <span slot="suffix">({{item.trainingType==0?'公里':'分钟'}})</span>
            </el-input>
          </el-form-item>
          <el-form-item
            label="组数选择："
            prop="numberGroups"
            
          >
            <el-input
              size="mini"
              :style="'width:'+width"
              v-model="item.numberGroups"
              placeholder="请输入"
            >
              <span slot="suffix">(组)</span>
            </el-input>
          </el-form-item>
        </div>
        <template v-if="item.firstLevel=='special_training_water'">
          <!-- 水上训练 -->
          <div>
            <el-form-item
              label="桨频SR要求："
              prop="sr"
             
            >
              <el-input size="mini" style="width:240px" v-model="item.sr" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item
              label="心率HR要求："
              prop="sr"
              
            >
              <el-input size="mini" style="width:240px" v-model="item.sr" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item
              label="每组间歇选择："
              prop="gapTime"
              
            >
              <el-input
                size="mini"
                :style="'width:'+width"
                v-model="item.gapTime"
                placeholder="请输入"
              >
                <span slot="suffix">(分钟)</span>
              </el-input>
            </el-form-item>
          </div>
        </template>
        <template
          v-if="item.firstLevel=='land_specific_training_dynamometer'||item.firstLevel=='land_strength_training'||item.firstLevel=='aerobic_training_land'"
        >
          <!-- 陆上训练 -->
          <div>
            <el-form-item
              label="训练手段："
              prop="trainingType"
             
            >
              <el-select size="mini" v-model="item.trainingType">
                <el-option label="时间" value="1"></el-option>
                <el-option label="公里数" value="0"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item
              label="桨频SR要求："
              prop="sr"
              
            >
              <el-input size="mini" style="width:240px" v-model="item.sr" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item
              label="心率HR要求："
              prop="sr"
              
            >
              <el-input size="mini" style="width:240px" v-model="item.sr" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </template>
        <div>
          <el-form-item label=" ">
            <el-button size="mini" type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { validate } from "@/utils/reg";
import {
  annualweek,
  nowtimes,
  plansweek,
  establishweek,
} from "@/api/monitor/logininfor";
export default {
  name: "",
  data() {
    return {
      options: [],
      width: "140px",
      validate: validate,
      form: [],
      mock: [],
    //   存时间的变量
      times:""
    };
  },
  methods: {
    //添加form
    add() {
      this.form.push({
        Day: "",
        trainingType: "0",
        weekId: "",
        dayWeek: "",
        fourSeasons: "",
        firstLevel: "",
        firstLevelName: "",
        secondLevel: "",
        secondLevelName: "",
        classHour: "",
        kilometers: "",
        sr: "",
        hr: "",
        numberGroups: "",
        gapTime: "",
        startTime: "",
        endTime: "",
      });
      this.mock.push({
        options: this.options,
        options1: [],
        time: "",
      });
    },
    setEdit(time){       
        // 拿到的时间
        console.log(time)     
        this.times=time;   
        console.log(this.times,8888);
    },
    setTime(index) {
      this.form[index].startTime = this.mock[index].time
        ? this.mock[index].time[0]
        : "";
      this.form[index].endTime = this.mock[index].time
        ? this.mock[index].time[1]
        : "";
    },
    min(item, index) {
      this.form = this.form.filter((e, i) => {
        return i != index;
      });
      this.mock = this.mock.filter((e, i) => {
        return i != index;
      });
    },
    submit() {
      var some = true;
      console.log(this.times);
      for (var i = 0; i < this.form.length; i++) {
        some = true;
        if (!this.form[i].firstLevel) {
          this.$message.info("请选择一级科目");
          some = false;
          break;
        }
        if (!this.form[i].secondLevel) {
          this.$message.info("请选择二级科目");
          some = false;
          break;
        }
         this.form[i].Day=this.times
      }
      if (some) {
        console.log(this.form);
        establishweek({
          trainingDayList: this.form,
        })
          .then((res) => {
              if (res.code === 200) {
                  this.msgSuccess("新增成功");
                  this.$emit("getFormSon", this.msg);
                } else {
                  this.msgError(res.msg);
                }
          })
          .catch((res) => {});
      }
    },
    //一级科目切换
    change(item, index) {
      this.mock[index].options.map((e) => {
        if (e.dictValue == item.firstLevel) {
          this.form[index].firstLevelName = e.dictLabel;
          this.mock[index].options1 = e.twoList;
        }
      });
    },
    //选择二级科目
    change1(item, index) {
      this.mock[index].options1.map((e) => {
        if (e.dictValue == item.secondLevel) {
          this.form[index].secondLevelName = e.dictLabel;
        }
      });
    },
  },
  mounted() {
    plansweek()
      .then((res) => {
        console.log(res);
        this.options = res.data;
        this.add();
      })
      .catch((res) => {});
  },
};
</script>
<style lang="scss" scoped>
.form {
  max-height: 600px;
  overflow: auto;
}
.item {
  margin: 0 10px 20px 10px;
  border-bottom: 1px solid #ccc;
  position: relative;
  .add {
    position: absolute;
    right: 0;
    top: 10px;
  }
}
</style>